<template>
  <div class="wrap" v-loading="loading">
    <div class="table-wrap">
      <div class="search_header">
        <div class="search_header_left">
          <el-select
            v-model="parameter.year"
            placeholder="请选择年度"
            @change="changeYear"
            clearable
          >
            <el-option
              v-for="(item, index) in yearArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>

      <el-table
        class="content"
        :data="goalList"
        :header-cell-style="{
          background: '#F2F6FB',
          color: ' #6B767D'
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          label="年度"
          prop="year"
          show-overflow-tooltip
        />
        <el-table-column
          label="模块"
          prop="moduleName"
          show-overflow-tooltip
        />

        <el-table-column
          label="指标"
          prop="indexName"
          show-overflow-tooltip
        />
        <el-table-column
          label="目标值"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.targetValue"
              placeholder="请输入"
              aria-disabled=""
              size="small"
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="单位"
          prop="unit"
          show-overflow-tooltip
        />
      </el-table>

      <el-button
        @click="saveInfo"
        class="save-btn"
        v-has="'importantGoal:save'"
        >保存</el-button
      >

      <!-- <div class="table-pagination">
        <el-pagination
          background
          :current-page.sync="parameter.pageIndex"
          layout="prev,pager,next"
          :page-size="parameter.pageSize"
          :total="total"
          @current-change="pageChange"
        />
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  queryImportGoalList,
  addImportantGoal
} from '@/api/FixedInvestmentTarget'

export default {
  name: 'ImportantGoal',

  data() {
    return {
      yearArr: [],
      goalList: [],
      total: 0,
      parameter: {
        pageIndex: 1,
        pageSize: 999,
        year: ''
      },
      loading: false
    }
  },
  mounted() {
    this.initYearMonth()
    this.getList()
  },
  methods: {
    changeYear() {
      this.getList()
    },

    initYearMonth() {
      const year = new Date().getFullYear()
      this.parameter.year = year
      const yearArr = [year, year - 1]
      yearArr.forEach((item) => {
        this.yearArr.push({
          value: item,
          label: item
        })
      })
    },

    getList() {
      this.loading = true
      queryImportGoalList(this.parameter)
        .then((res) => {
          if (res.success) {
            this.total = res.data.count
            this.goalList = res.data.list
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 表格高亮
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },

    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },

    saveInfo() {
      addImportantGoal(this.goalList).then((res) => {
        if (res.success) {
          this.$message.success('保存成功')
          // this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/css/table.scss';
.wrap {
  padding: 15px;
  height: 100%;
  width: 100%;
  background-color: #eff3f9;
}

.table-wrap {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;

  .search_header {
    height: 50px;
  }

  .content {
    flex: 1;
  }

  // .table-pagination {
  //   margin-top: 10px;
  //   display: flex;
  //   justify-content: flex-end;
  // }
  .save-btn {
    background: #497fa3;
    border: 1px solid #497fa3;
    width: 104px;
    color: white;
    font-size: 14px;
    width: 104px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
  }
}
</style>
